﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="utf-8" />
    <title>App Simulator</title>

    <script src="http://maindemo.cloudapp.net/Scripts/jquery-2.1.1.min.js"></script>
    <script src="http://maindemo.cloudapp.net/Simulator/Simulator.js"></script>
    <script src="http://maindemo.cloudapp.net/Scripts/globalize.js"></script>
    <script src="http://maindemo.cloudapp.net/Scripts/dx.all.js"></script>


    <link rel="stylesheet" href="http://maindemo.cloudapp.net/Simulator/Simulator.css" />
    <link rel="stylesheet" href="http://maindemo.cloudapp.net/Simulator/simulator-toolbar.css" />
    <link rel="stylesheet" href="http://maindemo.cloudapp.net/Content/dx.light.css" />
    <link rel="stylesheet" href="http://maindemo.cloudapp.net/xaf.dx.light.css" type="text/css" />
    <script type="text/javascript">
        var SIMULATOR_APPLICATION_HASH = "dxapp-hash";
        //T382853
        $(window).resize(function() {
            checkOffset();
        });
        $(window).scroll(function() {
            checkOffset();
        });
        function checkOffset() {
            if($('.device-options-toolbar').offset().top >= $('.logo').offset().top + $('.logo').height())
                $('.device-options-toolbar').css('position', 'fixed');
            if(($('.logo').offset().top + $('.logo').height()) > $('.device-options-toolbar').offset().top)
                $('.device-options-toolbar').css('position', 'relative');
        }
        $(function() {

            var DEVICE_KEY = "dx-simulator-device-name",
                OS_VERSION_NUMBER_KEY = "dx-simulator-os-version-number",
                ORIENTATION_KEY = "dx-simulator-orientation",
                SCALE_KEY = "dx-simulator-scale";

            var defaultSettings = {
                "dxapp-hash": "",
                "dx-simulator-device-name": "iPhone5",

                "dx-simulator-scale": 1,
                "dx-simulator-orientation": "p",
                "dx-simulator-os-version-number": undefined,

                "dx-simulator-scale-iPadMini": 1,
                "dx-simulator-orientation-iPadMini": "l",
                "dx-simulator-os-version-number-iPadMini": 7,

                "dx-simulator-scale-iPhone5": 1,
                "dx-simulator-orientation-iPhone5": "p",
                "dx-simulator-os-version-number-iPhone5": 7
            };

            var readSettings = function(key) {
                var value = window.sessionStorage && sessionStorage.getItem(key);
                return value || defaultSettings[key];
            },
                readDeviceSettings = function(key, device) {
                    var deviceKey = key + "-" + device;
                    return readSettings(deviceKey) || defaultSettings[key];
                },
                writeSettings = function(key, value) {
                    if(window.sessionStorage) {
                        sessionStorage.setItem(key, value);
                    }
                },
                writeDeviceSettings = function(key, device, value) {
                    var deviceKey = key + "-" + device;
                    writeSettings(deviceKey, value);
                };

            var queryStringToObject = function(queryString) {
                var result = {};

                if(queryString.charAt(0) === "?")
                    queryString = queryString.substring(1);

                var chunks = queryString.split("&");

                $.each(chunks, function() {
                    var equalPos = this.indexOf("=");
                    var key = decodeURIComponent(this.substr(0, equalPos)),
                        value = decodeURIComponent(this.substr(equalPos + 1));
                    result[key] = value;
                });

                return result;
            };

            var query = queryStringToObject(window.location.search),
                appPage = query["appPage"] || "player.html",
                device = readSettings(DEVICE_KEY),
                simulator = $("#simulatorFrame").dxSimulator({
                    returnInstance: true,
                    url: appPage + "#" + readSettings(SIMULATOR_APPLICATION_HASH),
                    device: device,
                    osVersionNumber: readDeviceSettings(OS_VERSION_NUMBER_KEY, device),
                    orientation: readDeviceSettings(ORIENTATION_KEY, device),
                    scale: readDeviceSettings(SCALE_KEY, device),
                    wrapFrame: true,
                    loadIndicator: $("#loadingIndicator")
                });

            var $orientationToolbarItem = $(".toolbar-item.rotate"),
                setOrientation = function(orientation) {
                    simulator.options("orientation", orientation);
                    var device = simulator.options("device");
                    writeDeviceSettings(ORIENTATION_KEY, device, orientation);
                    $orientationToolbarItem.toggle(device !== "desktop");
                };
            $orientationToolbarItem.on("click", function() {
                var orientation = simulator.options("orientation");
                orientation = orientation === "l" ? "p" : "l";
                setOrientation(orientation);
            });

            var $zoomToolbarItem = $(".toolbar-item.zoom"),
                setScale = function(scale) {
                    simulator.options("scale", scale);
                    var device = simulator.options("device");
                    writeDeviceSettings(SCALE_KEY, device, simulator.options("scale"));
                    $zoomToolbarItem.toggleClass("zoom-in", scale === "0.5");
                    $zoomToolbarItem.toggle(device !== "desktop");
                };
            $zoomToolbarItem.on("click", function() {
                var scale = simulator.options("scale");
                scale = scale === "0.5" ? "1.0" : "0.5";
                setScale(scale);
            });

            // device chooser
            var $deviceChooser = $('.device-toolbar'),
                setDevice = function(device) {
                    // Desktop mode navigation doesn't work inside <iframe>, open a new tab instead.
                    if(device === "desktop") {
                        window.open(appPage, "desktop-simulator");
                        return;
                    }
                    simulator.options({
                        device: device,
                        osVersionNumber: readDeviceSettings(OS_VERSION_NUMBER_KEY, device)
                    });
                    writeSettings(DEVICE_KEY, device);
                    writeDeviceSettings(OS_VERSION_NUMBER_KEY, device, simulator.options("osVersionNumber"));
                    $deviceChooser.find('.device').each(function() {
                        var $this = $(this);
                        $this.toggleClass('active', $this.attr('data-device') === device);
                    });

                    var scale = readDeviceSettings(SCALE_KEY, device);
                    setScale(scale);

                    var orientation = readDeviceSettings(ORIENTATION_KEY, device);
                    setOrientation(orientation);
                };
            $deviceChooser.on("click", ".device", function() {
                setDevice($(this).attr("data-device"));
                return false;
            });

            setDevice(simulator.options("device"));

            var VisiblePopup = function() {
                var div = document.getElementById('deploy-popup');
                if(div.style.display == 'block') {
                    div.style.display = 'none';
                }
                else {
                    div.style.display = 'block';
                }
            };

            $('#deploy-link').on("click", "", function() {
                VisiblePopup();
                var indexUrl = window.location.search.indexOf("app=");
                if(indexUrl === -1) {
                    appUrl = window.location.origin + '/MetadataService.svc/AppConfig?dataServiceUrl=' + window.location.origin + '/DataService.svc';
                } else {
                    appUrl = window.location.search.substring(indexUrl + 4);
                }
                $.get(appUrl).success(function(result) {
                    var deployServiceUrl = "http://maindemo.cloudapp.net/DeployService.svc";

                    $.ajax(deployServiceUrl + "/UploadApp", {
                        type: 'post', data: JSON.stringify(result), headers: {
                            Accept: "application/json"
                        }
                    }).success(function(data) {
                        window.location.href = deployServiceUrl + "/PhoneGapZip/" + data;
                    });
                });
            });
            $('#deploy-close').on("click", "", VisiblePopup);
            $('#deploy-close-button').on("click", "", VisiblePopup);
            $("#simulatorFrame").load(function() {
                var proxyUrl = queryStringToObject(window.location.search)["proxyUrl"] || this.contentWindow.location;
                $("#qr").attr("src", "https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=" + encodeURIComponent(proxyUrl));
                $("#qr-link").attr("href", proxyUrl);
            });
        });

    </script>
</head>
<body>
    <div id="Main" class="wrapper">
        <div class="sidebar">
            <div class="logo"></div>
            <div class="device-options-toolbar">

                <div class="device-options-toolbar-view-settings">
                    <div class="toolbar-item zoom">
                        <div class="toolbar-item">
                            <div class="center-center">
                                <img src="http://maindemo.cloudapp.net/Simulator/Images/icon_zoom.png" alt="zoom" />
                                <div class="zoom-in">Zoom in</div>
                                <div class="zoom-out">Zoom out</div>
                            </div>
                        </div>
                    </div>
                    <div class="toolbar-item rotate">
                        <div class="toolbar-item">
                            <div class="center-center">
                                <img src="http://maindemo.cloudapp.net/Simulator/Images/icon_rotate.png" alt="rotate" />
                                <div>Rotate</div>
                            </div>
                        </div>
                    </div>
                </div>

                <span class="toolbar-item deploy">
                    <div class="center-center">
                        <a class="center-center" href="#" id="deploy-link" target="_self">
                            <img class="normal" src="http://maindemo.cloudapp.net/Simulator/Images/icon_build.png" alt="phone" />
                            <div>Build application <br> for mobile</div>
                        </a>
                    </div>
                    <div class="dx-popup-wrapper deploy-popup" id="deploy-popup">
                        <div class=" deploy-popup-content">
                            <div class="dx-button-has-icon" id="deploy-close">
                                <div class="dx-button-content deploy-popup-close">
                                    <i class="dx-icon dx-icon-close">
                                    </i>
                                </div>
                            </div>
                            <div class="deploy-popup-image-container">
                                <img style="display:inline" src="http://maindemo.cloudapp.net/Simulator/Images/download.jpg" />
                            </div>
                            <div class="dx-textarea deploy-popup-title">
                                Your download is about to start.
                            </div>
                            <div class="dx-content deploy-popup-text">
                                Once it has been completed, upload the resulting mobile application configuration file (ZIP) to<b> <a class="deploy-popup-reference" href="https://build.phonegap.com/" id="deploy-link">https://build.phonegap.com/</a></b> where you can build a mobile app for all supported platforms (iOS, Android or Win8).
                                Refer to <b><a class="deploy-popup-reference" href="https://helpx.adobe.com/phonegap-build/tutorials.html">PhoneGap Build Online Tutorial</a></b>  for detailed instructions on how to compile your application.
                            </div>
                            <div class="deploy-popup-button-close-container">
                                <div class="dx-widget dx-button-has-text dx-button dx-button-normal deploy-popup-button-close" style="margin:auto" id="deploy-close-button">Close</div>
                            </div>
                        </div>
                    </div>
                </span>
                <div class="qr-code-container">
                    <a href="#" id="qr-link" target="_blank">
                        <img id="qr" src="" class="qr-code" />
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="main">
        <iframe id="simulatorFrame" scrolling="no" border="0"></iframe>
        <div id="loadingIndicator" class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>
</body>
</html>
